<template>
  <div class="container">
    <div class="top">
      <img class="bg" src="../../../static/images/default_image_family.png">
      <div class="rgba"></div>
      <div class="icons">
        <img src="../../../static/images/group_man.png">
        <img src="../../../static/images/group_set.png">
        <img src="../../../static/images/group_share.png">
      </div>
      <div class="info">
        <div class="header">
          <img class="header-img" src="../../../static/images/default_image_family.png">
        </div>
        <div class="describe">
          <h class="d-title">相亲一家人</h>
          <h class="d-con line2">成员在这里会更新一些阅读摘录，同时大家随时分享自己的阅读进度，阅读计划 阅读计划阅读计划阅读计划阅读计划阅读计划。</h>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="con-top">

      </div>
    </div>
  </div>
</template>

<script>

  export default {
    data () {
      return {
        userInfo: {},
        isShow:false
      }
    },

    onShow () {
      console.log(`GROUP`)
    },
    methods: {
      open() {
        wx.showActionSheet({
          itemList: ['A', 'B', 'C'],
          success: function (res) {
            console.log(res.tapIndex)
          }
        });
      }
    },

  }
</script>

<style scoped lang="less">
  .container{
    //background-color: #FAFAFA;
  }
  .top{
    width:750rpx;
    height:384rpx;
    position: relative;
    overflow: hidden;
    .info{
      z-index: 99;
      width:100%;
      height:180rpx;
      margin-top: 38rpx;
      .describe{
        width:520rpx;
        height:160rpx;
        display: inline-block;
        color:#fff;
        float: right;
        margin-right: 14rpx;
        .d-title{
          font-size:34rpx;
          display: block;
          line-height:64rpx;
        }
        .d-con{
          font-size:28rpx;
          line-height:42rpx;
          font-weight: normal;
        }
      }
      .header{
        display: inline-block;
        width:160rpx;
        height:160rpx;
        border:5rpx solid #fff;
        margin-left: 28rpx;
        border-radius: 8rpx;
        overflow: hidden;
        .header-img{
          height:160rpx;
          width:210rpx;
          margin-left: -24rpx;
        }
      }
    }
    .bg{
      width:750rpx;
      height:581rpx;
      position: absolute;
      top:-100rpx;
      left: 0;
      -webkit-filter: blur(4rpx);
      -moz-filter: blur(4rpx);
      -o-filter: blur(4rpx);
      -ms-filter: blur(4rpx);
      filter: blur(4rpx);
      z-index: -2;
    }
    .rgba{
      width:750rpx;
      height:384rpx;
      position: absolute;
      background:rgba(95,95,95,.19);
      top:0;
      left: 0;
      z-index: -1;
    }
    .icons{
      width:100%;
      height:48rpx;
      text-align: right;
      margin-top: 32rpx;
      img{
        width:48rpx;
        height:48rpx;
        margin:0 14rpx 0 6rpx;
      }
    }
  }
  .content{
    width:622rpx;
    margin: 32rpx auto;
    background-color: #fff;
    border-radius: 16rpx 16rpx 0 0;
    box-shadow:0px 6rpx 16rpx 0px rgba(41,82,130,0.08);
    padding:0 32rpx;
    height:400rpx;
    .con-top{
      height:110rpx;
      width:100%;
    }
  }
</style>
